<template>
  <div class="w-full h-full flex flex-col">
    <div class="w-full flex flex-row justify-between">
      <div class="text-f15 text-c3">个人版Banner管理</div>
      <el-button
        type="primary"
        class="bg-cmain_hover ml-w10"
        icon="el-icon-plus"
        @click="dialog_add_banner = true"
      >
        添加banner</el-button
      >
    </div>

    <div class="w-full h-full mt-w20">
      <el-table
        :data="s_banner.list_store_banner"
        stripe
        style="width: 100%"
        height="680"
      >
        <el-table-column type="index" label="序号" min-width="5%">
        </el-table-column>
        <el-table-column prop="imageUrl" label="图片" min-width="20%">
          <template slot-scope="scope">
            <el-image
              style="width: 143px; height: 97px"
              :src="scope.row.imageUrl"
              lazy
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="goodsName" label="商品名称" min-width="20%">
        </el-table-column>
        <el-table-column prop="goodsType" label="商品类型" min-width="20%">
        </el-table-column>
        <el-table-column prop="sort" label="排序" min-width="5%">
          <div class="item flex flex-row items-center" slot-scope="scope">
            <div v-if="scope.row.top !== 0">【置顶】</div>
            <div v-else>{{ "【" + scope.row.sort + "】" }}</div>
            <div v-if="scope.row.top === 0" style="display: flex">
              <img
                  class="w-w20 h-w20 cursor-pointer"
                  src="@/assets/image/icon_data_down_normal.png"
                  alt="下移"
                  srcset=""
                  @click="action_move_down(scope.row)"
              />
              <img
                  class="w-w20 h-w20 cursor-pointer"
                  src="@/assets/image/icon_data_up_normal.png"
                  alt="上移"
                  srcset=""
                  @click="action_move_up(scope.row)"
              />
            </div>
          </div>
        </el-table-column>
        <el-table-column label="操作" min-width="15%">
          <template slot-scope="scope">
            <el-button size="mini" @click="action_move_top(scope.row)" v-if="scope.row.top === 0">置顶</el-button>
            <el-button size="mini" @click="action_cancel_top(scope.row)" v-else>取消置顶</el-button>
            <el-button size="mini" @click="action_edit_banner(scope.row)">修改</el-button>
            <el-button
              size="mini"
              style="background-color: #f56c6c"
              type="danger"
              @click="action_del_banner(scope.row.id)"
            >
              删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="w-full flex items-end justify-center" style="height: 7%">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="s_banner.m_page.total"
          :page-size="s_banner.m_page.limit"
          @current-change="action_page_change"
        >
        </el-pagination>
      </div>
    </div>
    <UiDialogAddStoreBanner
      :is_showDialog="dialog_add_banner"
      :data="s_banner.m_store_banner"
      @nydialog_closed="dialog_add_banner = false"
      @nydialog_submit="action_do_edit"
    ></UiDialogAddStoreBanner>
  </div>
</template>

<script src="./Index.ts"></script>
<style src="./Index.less" lang="less" scoped>
</style>
